<template>
	<div class="fix-all start-page" v-if="startInfo.show">
		<!-- <img @click.stop.prevent="transformIsShowStartPage()" src="../assets/images/start-page.png" height="100%" width="100%"> -->
		<div v-if="app.model==2" class="buttons ">
			<button class="btn" v-gesture:tap.stop.prevent="toNav(2)">历史订单</button>
			<button v-gesture:tap.stop.prevent="toNav(1)">开始点单</button>
		</div>
		<h1>{{appUrlInfo.storeName || 斑砖美食}}</h1>
		<section class="logo divtca"><i class="iconfont icon-iconshop divtcvma"></i><img class="divtcvma"  src={{appUrlInfo.merchantLogo}} onload="this.style.display='inline-block'" /></section>
		<button v-if="app.model==1" class="btn-start divtca" v-gesture:tap.stop.prevent="transformIsShowStartPage()">开始点单</botton>
	</div>
	<div class="fix-all start-page" v-else>
		<!-- <div class="divtcvm loading"></div> -->
		<div  v-if="startInfo.error" class="error fix-all"><div class="divtcvma content"><icon name="warn" type="message"></icon><p>{{startInfo.msg}}</p></div></div>
		<toast type="loading" v-else>正在加载</toast>
	</div>

</template>

<script type="text/javascript">
	export default{
		vuex:{
			getters:{
					app:(state)=>state.app
			}
		},
		props:{
			isShowStartPage:{
				require:true
			},
			isShowConfirmOrder:{
				require:true
			},
			startInfo: {
				require: true
			},
			appUrlInfo: {
				require: true
			}
		},
		data(){
			return {
				isBtn:false
			}
		},
		methods:{
			toNav(i){
				this.isBtn = true;
				if(i==1){
					this.isShowConfirmOrder = true;
					this.isShowStartPage = !this.isShowStartPage;
					this.$parent.order.emptyOrder();
					this.$parent.isShowShoppingCart = false;
					this.$router.go("/");
				} else if(i==2){
					this.isShowConfirmOrder = true;
					this.isShowStartPage = !this.isShowStartPage;
					this.$router.go({ name: 'order-list'});
				}
			},
			transformIsShowStartPage:function(){
				this.isBtn = true;
				this.isShowConfirmOrder = true;
				this.isShowStartPage = !this.isShowStartPage;
				this.$router.go("/");
			}
		},
		components: {
			'toast': require('../components/toast/toast'),
			'icon': require('../components/icon/icon')
		},
		route:{
			canDeactivate(transition){
				// debugger
					if(this.isBtn){
						this.isBtn = false;
						return transition.next();
					}else if(transition.to.name=="complete-order"){
						//台座版
						return transition.next();
					}  else {

						return transition.abort();
					}
			},
			activate(transition){
debugger
				//从首页返回 并且购物车是打开的
				if(transition.from.name=="inventory-list"){
					if(this.$parent.isShowShoppingCart&&this.$parent.inventoryOptionGroup.show){
						this.$parent.inventoryOptionGroup.show = false;
						this.isBtn = true;
						return transition.abort();
					} else if(this.$parent.isShowShoppingCart){
						this.$parent.isShowShoppingCart= false;
						this.isBtn = true;
						return transition.abort();
					} else {
						return transition.next();
					}
				}
				return transition.next();
			}
		}
	}
</script>

<style lang='sass'>
	@import '../assets/sass/global/themes.scss';
	.fix-all::-webkit-scrollbar{display: none;}
	.start-page{background: #fbfbfb;position: absolute;text-align: center}
	.start-page h1{color: #fe8100;font-size: 23px;font-weight:500;margin-top: 70px}
	.start-page .logo{width: 4.3rem;height: 4.3rem;margin-top: 45px;background: white;border-radius: 5%;position: absolute;border: 1px solid #d9d9d9}
	.start-page .logo img{width:4.35rem;height:4.35rem;background:white;display:none;border-radius: 5px;}
	.start-page .logo .icon-iconshop{font-size:2.9rem;color: #d9d9d9;}
	.start-page .btn-start{font-size: .5rem;background: #fe8100;width: 6.66667rem;height: 1.2rem;bottom: 1.46rem;color: white;border-radius: 5px;}
	.start-page .btn-start:active{background: $btn-color-active;}
	.start-page .error .content{top: 40%;}
	.start-page .buttons {
		position: absolute;
		width: 100%;
		bottom: 50px;
		 button{
			 margin-bottom: 30px;font-size: .5rem;background: #fe8100;width: 250px;height: 1.2rem;bottom: 1.46rem;color: white;border-radius: 3px;
			 &.btn{background: white;border: 1px solid #fe8100;color: #fe8100;}
		 }
	}
	/*@keyframes animation-loading{from {transform:rotate(0deg);}to {transform:rotate(360deg);}}*/
	/*.start-page .loading{background: url('../assets/svg/loading.svg');width: 2rem;height: 2rem;animation:animation-loading 1.5s infinite linear;}*/
</style>
